<template>
  <view class="container">
    <view class="header">
      <text class="title">商品集成测试页面</text>
    </view>
    
    <!-- 测试按钮 -->
    <view class="test-buttons">
      <button @click="testLoadProducts" class="test-btn">测试加载商品</button>
      <button @click="testHotProducts" class="test-btn">测试热销商品</button>
      <button @click="testRecommendProducts" class="test-btn">测试推荐商品</button>
    </view>
    
    <!-- 状态显示 -->
    <view class="status">
      <text class="status-text">状态: {{ status }}</text>
    </view>
    
    <!-- 热销商品展示 -->
    <view class="section" v-if="hotProducts.length > 0">
      <text class="section-title">🔥 热销商品 ({{ hotProducts.length }}个)</text>
      <view class="product-list">
        <view class="product-item" v-for="product in hotProducts" :key="product.id">
          <text class="product-name">{{ product.title }}</text>
          <text class="product-price">¥{{ product.price }}</text>
          <text class="product-sales">销量: {{ product.sales }}</text>
        </view>
      </view>
    </view>
    
    <!-- 推荐商品展示 -->
    <view class="section" v-if="recommendProducts.length > 0">
      <text class="section-title">💎 推荐商品 ({{ recommendProducts.length }}个)</text>
      <view class="product-list">
        <view class="product-item" v-for="product in recommendProducts" :key="product.id">
          <text class="product-name">{{ product.name }}</text>
          <text class="product-price">¥{{ product.price }}</text>
          <text class="product-sales">销量: {{ product.sales }}</text>
        </view>
      </view>
    </view>
    
    <!-- 原始数据展示 -->
    <view class="section" v-if="rawData.length > 0">
      <text class="section-title">📋 原始数据 ({{ rawData.length }}个)</text>
      <view class="raw-data">
        <view class="raw-item" v-for="(item, index) in rawData" :key="index">
          <text class="raw-text">{{ JSON.stringify(item, null, 2) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { listProduct } from '@/api/product'
import { API_CONFIG } from '@/api/config.js'

export default {
  data() {
    return {
      status: '准备就绪',
      hotProducts: [],
      recommendProducts: [],
      rawData: []
    }
  },
  
  onLoad() {
    this.testLoadProducts()
  },
  
  methods: {
    async testLoadProducts() {
      this.status = '正在加载商品数据...'
      try {
        const response = await listProduct()
        console.log('商品API响应:', response)
        
        if (response.code === 200 && response.rows) {
          this.rawData = response.rows
          this.status = `成功加载 ${response.rows.length} 个商品`
          
          // 自动测试筛选
          this.testHotProducts()
          this.testRecommendProducts()
        } else {
          this.status = '加载失败: ' + (response.msg || '未知错误')
        }
      } catch (error) {
        console.error('加载商品失败:', error)
        this.status = '加载异常: ' + error.message
      }
    },
    
    testHotProducts() {
      if (this.rawData.length === 0) {
        this.status = '请先加载商品数据'
        return
      }
      
      // 筛选热销商品
      const hotProductsData = this.rawData.filter(item => 
        item.isHot === '1' || item.isHot === 1 || item.isHot === true
      )
      
      // 转换格式
      this.hotProducts = hotProductsData.map(item => {
        // 直接使用图片URL，不需要拼接服务器地址（七牛云存储）
        let imageUrl = item.productImage || 'default.jpg'
        
        return {
          id: item.productId,
          title: item.productName || '商品名称',
          image: imageUrl,
          price: item.productPrice || '0.00',
          originalPrice: item.originalPrice || (parseFloat(item.productPrice || 0) * 1.3).toFixed(2),
          sales: item.salesCount || 0
        }
      })
      
      this.status += ` | 热销商品: ${this.hotProducts.length}个`
      console.log('热销商品:', this.hotProducts)
    },
    
    testRecommendProducts() {
      if (this.rawData.length === 0) {
        this.status = '请先加载商品数据'
        return
      }
      
      // 筛选推荐商品
      const recommendProductsData = this.rawData.filter(item => 
        item.isRecommend === '1' || item.isRecommend === 1 || item.isRecommend === true
      )
      
      // 转换格式
      this.recommendProducts = recommendProductsData.map(item => {
        // 直接使用图片URL，不需要拼接服务器地址（七牛云存储）
        let imageUrl = item.productImage || 'default.jpg'
        
        return {
          id: item.productId,
          name: item.productName || '商品名称',
          description: item.productDesc || '商品描述',
          image: imageUrl,
          price: item.productPrice || '0.00',
          sales: item.salesCount || 0
        }
      })
      
      this.status += ` | 推荐商品: ${this.recommendProducts.length}个`
      console.log('推荐商品:', this.recommendProducts)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.test-buttons {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.test-btn {
  background: #007aff;
  color: white;
  border: none;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
}

.status {
  background: white;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

.status-text {
  font-size: 28rpx;
  color: #666;
}

.section {
  background: white;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.product-item {
  background: #f8f8f8;
  padding: 15rpx;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.product-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.product-price {
  font-size: 26rpx;
  color: #ff4757;
  font-weight: bold;
}

.product-sales {
  font-size: 24rpx;
  color: #666;
}

.raw-data {
  max-height: 400rpx;
  overflow-y: scroll;
}

.raw-item {
  background: #f0f0f0;
  padding: 10rpx;
  border-radius: 5rpx;
  margin-bottom: 10rpx;
}

.raw-text {
  font-size: 20rpx;
  color: #333;
  font-family: monospace;
  white-space: pre-wrap;
}
</style>